<template>
  <div class="bg-gradient-to-b from-[#ECEFFD] to-[#F5F9FF] h-screen flex flex-col">
    <visitorListHead :title="'我的沟通'" @search="onSearch" @filter="onClickFilter" />

    <div class="flex-auto overflow-y-auto">
      <visitList
        :list="list"
        v-model:loading="loading"
        v-model:finished="noMore"
        v-model:refreshing="refreshing"
        :loadMoreData="loadMoreData"
        :onRefresh="onRefresh"
      />
    </div>

    <visitorFilter
      ref="filter"
      @onConfirm="onConfirmFilter"
      :default-date-range="[startTime, endTime]"
    />
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import visitList from "../components/visitList.vue";
import visitorListHead from "../components/listHead.vue";
import { useMyXmateStore } from "@/store";
import { getDateRange, ParameterDateType, formatCompletionTime } from "@/utils/timeTool";
import visitorFilter from "../components/visitorFilter.vue";
import customNavBar from "../components/customNavBar.vue";

const store = useMyXmateStore();

onMounted(() => {
  // store.getSystemTagsAction();
  getData(makeParameter());
});

const filter = ref();
function onClickFilter() {
  filter.value.show();
}

function onSearch(value) {
  searchText.value = value;
  getData(makeParameter());
}

const list = computed(() => store.myVisitList);
const noMore = computed(() => store.noMoreData);
const loading = ref(false);
const refreshing = ref(false);

const searchText = ref("");

const startTime = ref(getDateRange("inPastMonth").startDate);
const endTime = ref(getDateRange("inPastMonth").endDate);
const tags = ref([]);
const page = ref(1);
function makeParameter() {
  return {
    searchKey: searchText.value,
    startTime: formatCompletionTime(startTime.value, ParameterDateType.START_DATE),
    endTime: formatCompletionTime(endTime.value, ParameterDateType.ENE_DATE),
    pageSize: 40,
    pageNumber: page.value,
    asc: true,
    ...filterParams.value,
  };
}

async function getData(parameter) {
  loading.value = true;
  await store.getVisitorListAction(parameter);
  loading.value = false;
}

async function loadMoreData() {
  page.value++;
  await getData(makeParameter());
}

async function onRefresh() {
  page.value = 1;
  refreshing.value = true;
  await getData(makeParameter());
  refreshing.value = false;
}

const filterParams = () => store.filterParams.myVisit;
function onConfirmFilter(parameter) {
  console.log("onConfirmFilter: ", parameter);
  const { dateRange } = parameter;
  delete parameter.dateRange;
  filterParams.value = parameter;

  if (dateRange) {
    startTime.value = dateRange[0];
    endTime.value = dateRange[1];
  }
  page.value = 1;
  getData(makeParameter());
}
</script>

<style lang="less" scoped></style>
